<!--  -->
<template>
  <div class="box flex grow column">
    <div class="head flex shrink">
      <div class="type clear">
        <span class="item fl" :class="{ cur: !type }" @click="type = 0"
          >头条新闻</span
        >
        <span class="item fl" :class="{ cur: type }" @click="type = 1"
          >上市公司</span
        >
      </div>
      <span class="more" @click="jump">更多></span>
    </div>
    <div class="articleList">
      <div
        class="item flex"
        v-for="item in articleList"
        :key="item.id"
        @click="toDetail(item.guid)"
      >
        <span class="title" :class="item.class">{{ item.title }}</span>
        <span class="time shrink">{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getHeadList, getCompanyList } from "../api/index";
import dayjs from "dayjs";
import { openWeb } from "../script/utils";
// import { GW } from "@/common/const";
import {GW} from "../script/const";


export default {
  data() {
    return {
      type: 0,
      article1List: [],
      article2List: [],
      articleList: [],
    };
  },
  watch: {
    type() {
      this.articleList = !this.type ? this.article1List : this.article2List;
    },
  },
  components: {},
  computed: {},
  mounted() {
    this.getHeadList();
    this.getCompanyList();
    console.log(GW)
  },
  methods: {
    jump() {
      openWeb(GW + "/genera/index.html#/list", "头条新闻");
    },
    toDetail(guid) {
      openWeb(GW + "/genera/index.html#/detail/" + guid, "头条新闻", 1);
    },
    handler(data) {
      return data.map((item) => {
        item.time = dayjs(item.publDate).format("MM-DD");
        item.class = {
          ellipsis: item.title.length > 30,
        };
        item.title =
          item.title.length > 30 ? item.title.substring(0, 30) : item.title;
        return item;
      });
    },
    async getHeadList() {
      await getHeadList().then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const handlerData = this.handler(data);
          this.article1List = handlerData;
          this.articleList = handlerData;
        }
      });
    },
    async getCompanyList() {
      await getCompanyList().then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const handlerData = this.handler(data);
          this.article2List = handlerData;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
.box {
  background: $bg;
  height: 100%;
  border: 1px solid #000;
  .head {
    background: $border;
    align-items: center;
    height: 34px;
    text-align: center;
    position: relative;
    justify-content: space-between;
    .type {
      .item {
        height: 24px;
        line-height: 24px;
        color: #cccccc;
        font-size: 16px;
        padding: 0 8px;
        cursor: pointer;
        position: relative;
        margin-left: 10px;
        &.cur {
          color: #ffffff;
          background: #35497c;
          border-radius: 4px;
        }
      }
    }
    .more {
      padding-right: 17px;
      color: #cccccc;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .articleList {
    line-height: 29px;
    .item {
      cursor: pointer;
      font-size: 16px;
      color: #999999;
      padding: 0 10px 0 15px;
      justify-content: space-between;
      .title {
        white-space: nowrap;
        overflow: hidden;
        margin-right: 10px;
        &.ellipsis::after {
          content: "...";
          clear: both;
          display: inline-block;
        }
      }
      &:hover {
        background: #1d202c url($PIC_URL + "/tlbypcWeb/genera/jiao.png")
          no-repeat left center;
        background-size: 10px 8px;
        .title {
          color: #e0e0e0;
        }
        .time {
          color: #ffffff;
        }
      }
    }
  }
}
</style>
